/**
 * Created by duke on 2020/9/16.
 */
import React from 'react';
import { PureComponent } from "react";
import { Layout, Row, Col, Menu, Select, Button, Carousel } from 'antd';
import { Link } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
const { Header, Footer, Sider, Content } = Layout;
const { SubMenu } = Menu;
const { Option } = Select;
export default class Upos extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            path: localStorage.getItem("path"),
            current: '1',
            IsmouseOver: false,
            IsmouseOverAnroid: false,
            IsFooter1: false,
            IsFooter2: false,
            IsFooter3: false,
            IsFooter4: false,
        }
    };
    componentWillMount() {

    };
    componentDidMount() {

    };
    mouseOver = () => {
        this.setState({
            IsmouseOver: true
        })
    }
    mouseOverAnroid = () => {
        this.setState({
            IsmouseOverAnroid: true
        })
    }
    mouseOut = () => {
        this.setState({
            IsmouseOver: false
        })
    }
    mouseOutAnroid = () => {
        this.setState({
            IsmouseOverAnroid: false
        })
    }
    footer1Over = () => {
        this.setState({
            IsFooter1: true
        })
    }
    footer1Out = () => {
        this.setState({
            IsFooter1: false
        })
    }
    footer2Over = () => {
        this.setState({
            IsFooter2: true
        })
    }
    footer2Out = () => {
        this.setState({
            IsFooter2: false
        })
    }
    footer3Over = () => {
        this.setState({
            IsFooter3: true
        })
    }
    footer3Out = () => {
        this.setState({
            IsFooter3: false
        })
    }
    footer4Over = () => {
        this.setState({
            IsFooter4: true
        })
    }
    footer4Out = () => {
        this.setState({
            IsFooter4: false
        })
    }
    uposClick = () => {

        window.location.href = "/upos/";


    }
    questionClick = () => {
        window.location.href = "/question/";
    }
    chatClick = () => {
        window.location.href = "/chat/";
    }
    backTop = () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        })
    }
    render() {
        let { path, current, IsmouseOver, IsmouseOverAnroid, IsFooter1, IsFooter2, IsFooter3, IsFooter4, } = this.state;
        return (
            <Layout style={{ background: '#fff', minWidth: '1500px', overflow: 'auto' }}>
                <Header style={{ width: '100%', }}>
                    <Row>
                        <Col span={4}></Col>
                        <Col span={16}>
                            <Row style={{ width: '100%' }}>
                                <Col span={4}>
                                    <img src={path + "images/header.png"} style={{ width: '143px', height: '26px' }} />
                                </Col>
                                <Col span={9}>
                                    <img src={path + "images/slogan.png"} style={{ width: '190px', height: '48px' }}></img>
                                </Col>
                                <Col span={11} style={{ position: 'relative' }}>
                                    <img src={path + "images/arrowDown.png"} style={{ width: '24px', position: 'absolute', top: '19px', left: '140px' }}></img>
                                    <Menu mode="horizontal" selectedKeys={[current]}>
                                        <Menu.Item key="0">
                                            <Link to="/" style={{ color: '#2B292D' }}>首页</Link>
                                        </Menu.Item>
                                        <SubMenu key="sub1" title="产品中心">
                                            <Menu.Item key="1">
                                                <Link to="/upos/"> 进销存管理系统</Link>
                                            </Menu.Item>
                                            <Menu.Item key="2">
                                                <Link to="/pos/">收银系统</Link>
                                            </Menu.Item>
                                            <Menu.Item key="3">
                                                <Link to="/posApp/">在线商城APP</Link>
                                            </Menu.Item>

                                        </SubMenu>
                                        {/* <Menu.Item key="2">
                                        <Link to="/pos/">POS收银系统</Link>
                                    </Menu.Item>
                                    <Menu.Item key="3">
                                       <Link to="/posApp/">UPOS APP</Link>
                                    </Menu.Item> */}
                                        <Menu.Item key="4">
                                            <Link to="/question/">解决方案</Link>
                                        </Menu.Item>
                                        <Menu.Item key="5">
                                            <Link to="/chat/">关于我们</Link>
                                        </Menu.Item>

                                    </Menu>

                                </Col>

                            </Row>
                        </Col>
                        <Col span={4}></Col>
                    </Row>
                </Header>
                <Content>
                    <img src={path + "images/uposBanner.png"} style={{width:'100%'}}></img>
                    <div style={{overflow:'hidden',}}>
                        <div style={{ width: '1200px', margin: '0 auto', overflow: 'hidden',padding:'72px 0'}}>
                            <div style={{float:'left'}}>
                                <img src={path + "images/uposGood.png"} style={{width:'584px'}}></img>
                            </div>
                            <div style={{float:"left",marginLeft:'133px',width:'483px'}}>
                                <p style={{ color:'#151515',fontSize:'36px',paddingTop:'80px',fontWeight:'500',marginBottom:'24px'}}>商品管理模块</p>
                                <p style={{ color: '#151515', fontSize: '16px', fontWeight: '400',margin:'0'}}>“商品添加既入库”简化了日常录入商品的操作，也可以直接导入供应商提供的电子单据；支持意大利法定的10种商品税率，有效防止门店额外缴纳税款；品牌和分类管理有利于门店了解商品特性，提高经营管理；提供3种商品标签的打印格式，满足商品展示的全部场景；</p>
                                <div style={{ margin:'96px 35px 0 0',background:'#00CBD8',color:'#ffffff',borderRadius:'2px',width:'224px',height:'54px',display:'inline-block',lineHeight:'54px',textAlign:'center'}}>
                                   
                                    <a href="https://www.youtube.com/watch?v=oIDKed_3OPQ" target="_blank" style={{ color: '#ffffff', }}> 查看“商品管理”视频</a>
                                    </div>
                                <div style={{ margin: '96px 0 0 0', background: '#ffffff', color: '#00CBD8', borderRadius: '2px', width: '224px', height: '54px', border: '2px solid #00CBD9', display: 'inline-block', lineHeight: '54px', textAlign: 'center'  }}>
                                   
                                    <a href="https://youtu.be/rnwfVHL7MoM" target="_blank" style={{ color: '#00CBD8', }}>  查看“批量导入”视频</a>
                                    </div>
                            </div>
                        </div>
                    </div>
                    <div style={{ overflow: 'hidden',  }} className="uposBanner">
                        <div style={{ width: '1200px', margin: '0 auto', overflow: 'hidden',padding:'72px 0' }}>
                           
                            <div style={{ float: "left", marginRight: '133px', width: '483px' }}>
                                <p style={{ color: '#151515', fontSize: '36px', paddingTop: '80px', fontWeight: '500', marginBottom: '24px' }}>库存管理模块</p>
                                <p style={{ color: '#151515', fontSize: '16px', fontWeight: '400', margin: '0' }}>提供采购、销售、库存的全流程管理；UPOS对商品的各个业务流程进行跟踪和监控，实时更新商品的库存数量，并提供“库存流水”功能，供门店随时了解商品的库存变化明细；销售开单支持开具电子发票，满足批发客户购物索要电子发票的需求；</p>
                                <div style={{ margin: '96px 35px 0 0', background: '#00CBD8', color: '#ffffff', borderRadius: '2px', width: '224px', height: '54px', display: 'inline-block', lineHeight: '54px', textAlign: 'center' }}>
                                  
                                    <a href="https://www.youtube.com/watch?v=E4kNC_dwu6w" target="_blank" style={{ color: '#ffffff', }}>   查看“开具电子发票”视频</a>
                                    </div>
                                <div style={{ margin: '96px 0 0 0', background: '#ffffff', color: '#00CBD8', borderRadius: '2px', width: '224px', height: '54px', border: '2px solid #00CBD9', display: 'inline-block', lineHeight: '54px', textAlign: 'center' }}>
                                   
                                    <a href="https://www.youtube.com/watch?v=BBYte0aIdQE" target="_blank" style={{ color: '#00CBD8', }}> 查看“库存管理”视频</a>
                                    </div>
                            </div>
                            <div style={{ float: 'left' }}>
                                <img src={path + "images/uposInventory.png"} style={{ width: '584px' }}></img>
                            </div>
                        </div>
                    </div>
                    <div style={{ overflow: 'hidden',  }}>
                        <div style={{ width: '1200px', margin: '0 auto', overflow: 'hidden', padding: '72px 0' }}>
                            <div style={{ float: 'left' }}>
                                <img src={path + "images/uposActivity.png"} style={{ width: '584px' }}></img>
                            </div>
                            <div style={{ float: "left", marginLeft: '133px', width: '483px' }}>
                                <p style={{ color: '#151515', fontSize: '36px', paddingTop: '80px', fontWeight: '500', marginBottom: '24px' }}>活动模块</p>
                                <p style={{ color: '#151515', fontSize: '16px', fontWeight: '400', margin: '0'  }}>目前支持门店使用2种促销活动：打折活动，系统可配合门店实际需要进行商品打折促销，同时提供2种活动价生成方式，满足不同的促销场景；优惠券活动，可针对不同客户等级群体发放购物优惠券，吸引新顾客到店消费，提高老顾客的二次购买率；</p>
                                <div style={{ margin: '96px 35px 0 0', background: '#00CBD8', color: '#ffffff', borderRadius: '2px', width: '224px', height: '54px', display: 'inline-block', lineHeight: '54px', textAlign: 'center' }}>
                                   
                                    <a href="https://www.youtube.com/watch?v=eu2QJfBMvxA" target="_blank" style={{ color: '#ffffff', }}> 查看“打折活动”视频</a>
                                    </div>
                                <div style={{ margin: '96px 0 0 0', background: '#ffffff', color: '#00CBD8', borderRadius: '2px', width: '224px', height: '54px', border: '2px solid #00CBD9', display: 'inline-block', lineHeight: '54px', textAlign: 'center' }}>
                                    
                                    <a href="https://www.youtube.com/watch?v=ck2HITI8mPA" target="_blank" style={{ color: '#00CBD8', }}> 查看“优惠券活动”视频</a>
                                    </div>
                            </div>
                        </div>
                    </div>
                    <div style={{ overflow: 'hidden', }} className="uposBanner">
                        <div style={{ width: '1200px', margin: '0 auto', overflow: 'hidden', padding: '72px 0' }}>

                            <div style={{ float: "left", marginRight: '133px', width: '483px' }}>
                                <p style={{ color: '#151515', fontSize: '36px', paddingTop: '80px', fontWeight: '500', marginBottom: '24px' }}>数据报表板块</p>
                                <p style={{ color: '#151515', fontSize: '16px', fontWeight: '400', margin: '0' }}>提供门店经营数据报表，包括：营业额、开单、毛利润 及退货报表等；提供供应商销售排行、商品分类销售排行报表，供门店从不同角度了解商品销售情况；支持2种商品预警报表：库存预警 和 滞销商品预警。库存预警及时反馈商品的库存异常状态，滞销商品预警供门店了解积压库存情况，便于及时调整销售策略。</p>
                                <div style={{ margin: '96px 35px 0 0', background: '#00CBD8', color: '#ffffff', borderRadius: '2px', width: '224px', height: '54px', display: 'inline-block', lineHeight: '54px', textAlign: 'center' }}>
                                    
                                    <a href="https://youtu.be/Z4jSXc8qU-Q" target="_blank" style={{ color: '#ffffff', }}>查看“系统看板”视频</a>
                                    </div>
                                <div style={{ margin: '96px 0 0 0', background: '#87D1DA', color: '#E4FEFF', borderRadius: '2px', width: '224px', height: '54px', display: 'inline-block', lineHeight: '54px', textAlign: 'center' }}>陆续上架视频中…</div>
                            </div>
                            <div style={{ float: 'left' }}>
                                <img src={path + "images/uposData.png"} style={{ width: '584px' }}></img>
                            </div>
                        </div>
                    </div>
                    <div style={{ overflow: 'hidden',marginBottom:'72px'  }}>
                        <div style={{ width: '1200px', margin: '0 auto', overflow: 'hidden', padding: '72px 0' }}>
                            <div style={{ float: 'left' }}>
                                <img src={path + "images/uposBasic.png"} style={{ width: '584px' }}></img>
                            </div>
                            <div style={{ float: "left", marginLeft: '133px', width: '483px' }}>
                                <p style={{ color: '#151515', fontSize: '36px', paddingTop: '80px', fontWeight: '500', marginBottom: '24px'}}>基本信息模块</p>
                                <p style={{ color: '#151515', fontSize: '16px', fontWeight: '400', margin: '0' }}>权限设置、基础信息设置、对客户及供应商管理等功能；权限设置使门店的数据更加隐私和安全；基础信息设置包含了对员工、收银系统和门店信息的管理；提供供应商分类管理，使门店掌握供应商的供货特征；零售和发票客户集中管理，通过设置客户等级以及对应的折扣，使客户管理更加灵活快捷；</p>
                                <div style={{ margin: '96px 35px 0 0', background: '#00CBD8', color: '#ffffff', borderRadius: '2px', width: '224px', height: '54px', display: 'inline-block', lineHeight: '54px', textAlign: 'center' }}>
                                   
                                    <a href="https://youtu.be/aKZfzO-57L0" target="_blank" style={{ color: '#ffffff', }}> 查看“权限管理”视频</a>
                                    </div>
                                <div style={{ margin: '96px 0 0 0', background: '#ffffff', color: '#00CBD8', borderRadius: '2px', width: '224px', height: '54px', border: '2px solid #00CBD9', display: 'inline-block', lineHeight: '54px', textAlign: 'center' }}>
                                    <a href="https://www.youtube.com/watch?v=3MLvFXCc65Y" target="_blank" style={{ color: '#00CBD8',}}>查看“客户管理”视频</a>
                                    </div>
                            </div>
                        </div>
                    </div>
                    
                </Content>

                <Footer style={{ background: '#001123', padding: '81px 0 0 0px', }}>
                    <div style={{ overflow: 'hidden', width: '1200px', margin: '0 auto' }}>
                        <div style={{ float: 'left' }}>
                            <img src={path + "images/logoUpos.png"} style={{ width: '143px', height: '26px' }} />
                        </div>
                        <div style={{ float: 'left', borderRight: '1px solid rgb(42,42,42)', padding: '0 90px 0px 196px', width: '588px' }}>
                            <a style={{ color: '#fff', fontSize: '16px', marginRight: '168px', }} className='aHover' >
                                <Link to="/upos/" style={{ color: '#fff', }} onClick={this.backTop}> 产品中心</Link>


                            </a>
                            <a style={{ color: '#fff', fontSize: '16px', }} className='aHover' >
                                <Link to="/question/" style={{ color: '#fff', }} onClick={this.backTop}>  解决方案</Link>


                            </a>
                            <p style={{ color: '#999999', fontSize: '14px', marginTop: '22px' }}>进销存管理系统</p>
                            <p style={{ color: '#999999', fontSize: '14px', marginTop: '12px' }}>收银系统</p>
                            <p style={{ color: '#999999', fontSize: '14px', marginTop: '12px' }}>在线商品APP</p>
                            <p style={{ marginTop: '92px', }}>
                                <a style={{ color: '#fff', fontSize: '16px', }} href="/chat/" className='aHover' >
                                    <Link to="/chat/" style={{ color: '#fff', }} onClick={this.backTop}>    关于我们</Link>


                                </a>
                            </p>
                            <p style={{ color: '#999999', fontSize: '14px', marginTop: '22px' }}>杭州青湘科技有限公司</p>
                            <div style={{ margin: '15px 0 0px 0', color: '#999999', fontSize: '14px', }}>
                                <span style={{ height: '16px', paddingRight: '20px', borderRight: '1px solid #999999', }}>杭州</span>
                                <span style={{ height: '16px', padding: '0px 16px 0px 16px', borderRight: '1px solid #999999', }}>上海</span>
                                <span style={{ height: '16px', padding: '0px 16px 0px 16px', borderRight: '1px solid #999999', }}>北京</span>
                                <span style={{ height: '16px', padding: '0px 16px 0px 16px', borderRight: '1px solid #999999', }}>深圳</span>
                                <span style={{ height: '16px', paddingLeft: '20px', }}>威尼斯</span>
                            </div>
                        </div>
                        <div style={{ float: 'left', paddingLeft: '86px', color: '#999999', }}>
                            <p style={{ fontSize: '16px' }}>中国联系方式：</p>
                            <div>
                                <img src={path + "images/weChat.png"} style={{ width: '24px', height: '24px' }}></img>
                                <span style={{ fontSize: '14px', marginLeft: '8px' }}>企业微信</span>

                            </div>
                            <div style={{ marginTop: '8px' }}>
                                <img src={path + "images/erweima.png"} style={{ width: '104px' }}></img>

                            </div>
                            <p style={{ fontSize: '16px', marginTop: '48px' }}>意大利销售专员：</p>
                            <div>
                                <img src={path + "images/phone.png"} style={{ width: '24px', height: '24px' }}></img>
                                <span style={{ fontSize: '14px', marginLeft: '8px' }}>韩先生手机</span>
                            </div>
                            <p style={{ fontSize: '14px', marginTop: '12px', color: '#fff' }}>+39/3778832691</p>
                        </div>
                        <div style={{ float: 'left', marginLeft: '117px', color: '#999', fontSize: '14px', paddingTop: '42px' }}>
                            <div>
                                <img src={path + "images/email.png"} style={{ width: '24px', height: '24px', }}></img>
                                <span style={{ fontSize: '14px', marginLeft: '8px' }}>Email</span>
                                <p style={{ color: '#fff', fontSize: '14px', marginTop: '8px' }}>support@imichi.cn</p>
                                <div style={{ marginTop: '172px' }}>
                                    <img src={path + "images/email.png"} style={{ width: '24px', height: '24px' }}></img>
                                    <span style={{ fontSize: '14px', marginLeft: '8px' }}>Email</span>
                                </div>
                                <p style={{ fontSize: '14px', marginTop: '12px', color: '#fff' }}>upositalia@gmail.com</p>
                            </div>
                        </div>
                    </div>
                    <div style={{ borderTop: '1px solid rgb(42,42,42)', marginTop: "79px", fontSize: '14px', color: '#999', textAlign: 'center', padding: '20px 0 22px' }}>版权所有 @杭州青湘科技有限公司</div>

                </Footer>

            </Layout>
        );
    }

}


